<!-- 
SPDX-FileCopyrightText: Copyright 2025-2025 深圳市同心圆网络有限公司
SPDX-License-Identifier: Apache-2.0 
-->
<script lang="ts">
	import { userStore } from '$lib/stores/user.svelte';
	import { Mail, Sticker, UserRound } from 'lucide-svelte';
	import UserLogin from './user/UserLogin.svelte';
	import { goto } from '$app/navigation';
	import { USER_TYPE } from '$lib/api/proto/user_api';

	const THEME_CONFIG_KEY = 'theme';

	let theme = $state(localStorage.getItem(THEME_CONFIG_KEY) ?? 'light');
	let showLogin = $state(false);
	let showLogout = $state(false);

	$effect(() => {
		document.documentElement.setAttribute('data-theme', theme);
	});
</script>

<div class="w-full h-[50px] flex justify-between items-center bg-accent">
	<a href="/" class="ml-[100px] text-2xl text-accent-content font-bold">成长俱乐部</a>
	<div class="flex mr-[100px] gap-2 items-center">
		<div class="flex gap-2 text-accent-content items-center">
			<Sticker size={20} />
			<a
				class="w-[150px] text-accent-content mr-[40px]"
				target="_blank"
				href="https://gitcode.com/lvupclub/lvup-web/issues">意见反馈</a
			>
		</div>
		<label class="select">
			<span class="label">主题</span>
			<select
				value={theme}
				onchange={(e) => {
					localStorage.setItem(THEME_CONFIG_KEY, e.currentTarget.value);
					theme = e.currentTarget.value;
				}}
			>
				<option value="light">浅色</option>
				<option value="dark">深色</option>
				<option value="cupcake">纸托蛋糕</option>
				<option value="bumblebee">大黄蜂</option>
				<option value="emerald">翡翠</option>
				<option value="corporate">公司</option>
				<option value="synthwave">合成器浪潮</option>
				<option value="retro">怀旧</option>
				<option value="cyberpunk">网络黑客</option>
				<option value="valentine">情人节</option>
				<option value="halloween">万圣节</option>
				<option value="garden">花园</option>
				<option value="forest">森林</option>
				<option value="aqua">溶液</option>
				<option value="lofi">低保真</option>
				<option value="pastel">蜡笔</option>
				<option value="fantasy">幻想</option>
				<option value="wireframe">线框</option>
				<option value="black">黑色</option>
				<option value="luxury">奢华</option>
				<option value="dracula">吸血鬼</option>
				<option value="cmyk">印刷</option>
				<option value="autumn">秋天</option>
				<option value="business">商务</option>
				<option value="acid">敏锐</option>
				<option value="lemonade">柠檬汽水</option>
				<option value="night">夜晚</option>
				<option value="coffee">咖啡</option>
				<option value="winter">冬天</option>
				<option value="dim">暗淡</option>
				<option value="nord">北方</option>
				<option value="sunset">日落</option>
				<option value="caramellatte">焦糖拿铁</option>
				<option value="abyss">深渊</option>
				<option value="silk">丝绸</option>
			</select>
		</label>

		{#if userStore.userSession == null}
			<button class="btn btn-primary" onclick={() => (showLogin = true)}>登录</button>
		{:else}
			<div class="ml-[50px]">
				<button
					type="button"
					class="btn btn-ghost text-accent-content"
					onclick={() => goto(`/user/${userStore.userInfo?.userId ?? ''}`)}
				>
					<Mail />
					{#if userStore.userSession != null && userStore.unReadMsgCount > 0}
						<div class="badge badge-sm badge-secondary">{userStore.unReadMsgCount}</div>
					{/if}
				</button>
			</div>
			<div class="dropdown">
				<div tabindex="0" role="button" class="btn btn-accent m-1 w-[150px] flex gap-2">
					{#if userStore.userInfo?.userType == USER_TYPE.USER_TYPE_LOCAL}
						<UserRound />
					{:else if userStore.userInfo?.userType == USER_TYPE.USER_TYPE_WECHAT}
						<div class="avatar">
							<div class="w-[24px] rounded-full">
								<img alt="avatar" src={userStore.userInfo?.basicInfo?.logoUri ?? ''} />
							</div>
						</div>
					{/if}

					{userStore.userInfo?.basicInfo?.displayName}
				</div>
				<ul class="menu dropdown-content bg-base-100 rounded-box z-1 w-[140px] p-2 shadow-sm gap-2">
					{#if userStore.userInfo?.userType == USER_TYPE.USER_TYPE_LOCAL}
						<li>
							<button type="button" class="btn btn-ghost">修改密码</button>
						</li>
					{/if}
					<li class="text-error">
						<button type="button" class="btn btn-ghost" onclick={() => (showLogout = true)}
							>退出登录</button
						>
					</li>
				</ul>
			</div>
		{/if}
	</div>
</div>

<div class="absolute -left-[10000px]">
	{#if showLogin}
		<UserLogin onClose={() => (showLogin = false)} />
	{/if}
	{#if showLogout}
		<dialog class="modal modal-open">
			<div class="modal-box">
				<button
					class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
					onclick={() => (showLogout = false)}>✕</button
				>
				<h3 class="text-lg font-bold">退出登录</h3>
				<p class="py-4">是否退出登录？</p>
				<div class="modal-action">
					<button class="btn" onclick={() => (showLogout = false)}>取消</button>
					<button
						class="btn btn-error"
						onclick={() =>
							userStore.logout().then(() => {
								showLogout = false;
								goto('/');
							})}>退出</button
					>
				</div>
			</div>
			<div class="modal-backdrop">
				<button onclick={() => (showLogout = false)}>close</button>
			</div>
		</dialog>
	{/if}
</div>